<template>
  <!-- 级联 -->
  <div class="conditions">
    <span class="title">{{title}}</span>
    <Cascader
      :data="options"
      clearable
      v-model="checkedList1"
      :render-format="format"
      change-on-select
      style="dispaly:inline-block;width:200px;"
      ref="address"
    ></Cascader>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    checkedList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    options: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 判断是否清空重置
    isClear:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
        checkedList1:this.checkedList
    };
  },
  computed: {},
  watch: {
    checkedList(val) {
      console.log(val)
      this.checkedList1 = val
      this.$emit("input", val);
    },
    isClear(val){
     if(val) {
         // 清空重置
         this.$refs.address.clearSelect()
         this.$emit('isClearFun', false);
     }
    }
  },
  methods: {
    format(labels, selectedData) {
      return labels[labels.length - 1];
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scope>
.ivu-cascader {
  display: inline-block;
}
</style>
